<template>
    <div class="today">
      <div class="todaytitle">
          <span class="s1">今日优选</span>
        <span class="s2"><van-icon class="ic" name="replay" />换一换</span>
      </div>
      <div class="youxuan">
        <ul>
          <li v-for="(key,item) in names">
            <span class="simg">
              <img :src=picUrl[item] alt="">
            </span>

            <span class="stext">
               <p class="p1">{{names[item]}}</p>
                <p class="p2">{{'节目:'+programCount[item]}}</p>
                <p class="p3">{{rcmdText[item]}}
                  <img :src=love[item] alt="">
                </p>

            </span>

          </li>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: "today",
      data(){
          return{
            imgArr:[require('../../img/today1.png'),require('../../img/today2.png'),require('../../img/today3.png')],
            p1:['张P_d·音乐盒','老涵本人','果达Gifty的卡拉OK'],
            p2:['节目:115','节目:61','节目:105'],
            p3:['隔路人歌手希望您能听懂我','听完好好睡一觉吧','最经典的《戒烟》小姐姐来了'],
            love:[require('../../img/todaylove.png')],
            names:[],
            picUrl:[],
            programCount:[],
            rcmdText:[],
          }
      },
      created(){
          this.$http.get('http://localhost:3000/dj/today/perfered')
            .then((res)=>{
              for(let i = 0; i < 3; i ++){
                this.names.push(res.data.data[i].name);
                this.picUrl.push(res.data.data[i].picUrl);
                this.programCount.push(res.data.data[i].programCount);
                this.rcmdText.push(res.data.data[i].rcmdText);
              }
            });

      }
    }
</script>

<style lang="scss">
  *{
    margin: 0px;
    padding: 0px;
  }
.today{
  box-sizing: border-box;
  padding: 0 15px;

  .todaytitle{
    margin-top: 60px;
    line-height: 48px;
    position: relative;
    span{
      display: inline-block;
      box-sizing: border-box;
      vertical-align: middle;
    }
    .s1{
      font-size: 48px;
      font-weight: bold;
    }
    .s2{
      position: absolute;
      right: 0;
      font-size: 30px;
      color: #818182;
    }
    .ic{
      vertical-align: middle;
        width: 32px;
    }
  }
  .youxuan{
    margin-top: 55px;
    ul{
      li{
        padding-right: unset;
        list-style: none;
        position: relative;
        margin-bottom: 20px;
        span{
          display: inline-block;
        }
       .simg{

         img{
           width: 300px;
           height: 300px;
           vertical-align: middle;
         }
       }
        .stext{

          width:900px;
          position: absolute;
          top: 50px;
          margin-left: 30px;

          .p1{
            font-size: 50px;
            font-weight: bold;
          }
          .p2{
            margin-top: 48px;
            font-size: 30px;
            color: #7d7d7f;
          }
          .p3{
            margin-top: 30px;
            font-size: 30px;
            color: #7d7d7f;
            padding-bottom: 30px;
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
            img{
              vertical-align: middle;
              width: 45px;
            }
          }

        }
      }
    }
  }
}
</style>
